<!--
<div id="vmaig-login">
    <div class="panel panel-vmaig">
        <div class="panel-heading">
            <h3 class="panel-title">请登陆</h3>
        </div>
        <form class="login-form clearfix" role="form">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-user"></span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-lock"></span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <button type="button" class="btn btn-vmaig pull-left">登录</button>
            <button type="button" class="btn btn-vmaig pull-right">注册</button>
        </form>
    </div>
</div>

-->

<div id="tags"class="">
</div>

<style>
#tags {
    background-color: rgba(0,0,0,0.6);
    margin-bottom: 20px;
}
</style>

<script src="/static/lib/d3/d3.js"></script>
<script src="/static/d3.layout.cloud.js"></script>
<script>
  var fill = d3.scale.category20();

  d3.layout.cloud().size([250, 250])
      .words([	"反汇编","OllyDbg","PE","ASM","Django","Python","Java","Bootstrap","Gentoo","linux","Shell","加密与解密","逆向","爬虫","反汇编","OllyDbg","PE","ASM","Django","Python","Java","Bootstrap","Gentoo","linux","Shell","加密与解密","逆向","爬虫","反汇编","OllyDbg","PE","ASM","Django","Python","Java","Bootstrap","Gentoo","linux","Shell","加密与解密","逆向","爬虫","反汇编","OllyDbg","PE","ASM","Django","Python","Java","Bootstrap","Gentoo","linux","Shell","加密与解密","逆向","爬虫","反汇编","OllyDbg","PE","ASM","Django","Python","Java","Bootstrap","Gentoo","linux","Shell","加密与解密","逆向","爬虫",
              ].map(function(d) {
        return {text: d, size: 10 + Math.random() * 30};
      }))
      .padding(5)
      .rotate(function() { return ~~(Math.random() * 2) * 90; })
      .font("Impact")
      .fontSize(function(d) { return d.size; })
      .on("end", draw)
      .start();

  function draw(words) {
      /*
    d3.select("body").append("svg")
        .attr("width", 300)
        .attr("height", 300)
      .append("g")
        .attr("transform", "translate(150,150)")
      .selectAll("text")
        .data(words)
      .enter().append("text")
        .style("font-size", function(d) { 
                return d.size + "px"; })
        .style("font-family", "Impact")
        .style("fill", function(d, i) { return fill(i); })
        .attr("text-anchor", "middle")
        .attr("transform", function(d) {
          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; });

        */
       d3.select("#tags").append("svg")
        .attr("width", 250)
        .attr("height", 250)
      .append("g")
        .attr("transform", "translate(125,125)");
      for (var i=0; i< words.length;++i)
      {
        d3.select("g").append("text").text(words[i].text) .style("font-size", words[i].size)
            .style("font-family", "Impact")
            .style("fill", fill(i))
            .attr("text-anchor", "middle")
            .attr("transform", 
          "translate(" + [words[i].x, words[i].y] + ")rotate(" + words[i].rotate + ")"
        )


      }
  }
</script>




